﻿<!DOCTYPE html>
<html>
<head>
    <title>锐浪HTML5报表 - 用AJAX方式载入报表模板与报表数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="../../grhtml5-6.6-min.js" type="text/javascript"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function window_onload() {
            //创建报表显示器，参数指定其在网页中的占位标签的ID，报表模板URL与报表数据URL不指定，而是在后面的AJAX操作中提供相关数据
            var reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder");

            reportViewer.reportPrepared = false; //指定报表生成需要加载报表模板
            reportViewer.dataPrepared = false;   //指定报表生成需要加载报表数据

            //TBD...以下URL要改，改为外网域名的URL
            //报表在模板与数据都载入后会自动生成
            var reportUrl = "http://localhost:50903/test/samples/jsonp//JsonpReadReport.jsp?callback=?&report=1a";
            $.getJSON(reportUrl, function (data) {
                reportViewer.loadReport(data);
            });

            var dataUrl = "http://localhost:50903/test/samples/jsonp//JsonpDataCenter.jsp?callback=?&data=Customer";
            $.getJSON(dataUrl, function (data) {
                reportViewer.loadData(data);
            });
        }
    </script>
</head>
<body onload="window_onload()">
    <div id="report_holder">
    </div>
</body>
</html>